<!--  采购入库	 -->

<template>
	<div>
		<!-- 按钮开始 -->
<!--		<el-tabs type="border-card" style="height: 100px;text-align: right;">-->
<!--			<el-button type="primary" icon="el-icon-plus" style="margin-top: 15px;" @click="AddMedicine">添加药品-->
<!--			</el-button>-->
<!--			&lt;!&ndash; :disabled="this.SubmitReview === 'n'?false :true" &ndash;&gt;-->
<!--			<el-button type="success" icon="el-icon-edit" :disabled="this.SubmitReview === 'n'?false :true"-->
<!--					   @click="batchSet">批量设置-->
<!--			</el-button>-->
<!--			<el-button type="warning" icon="el-icon-delete" :disabled="this.SubmitReview === 'n'?false :true"-->
<!--					   @click="Hold">暂存</el-button>-->
<!--			<el-button type="danger" icon="el-icon-check" :disabled="this.SubmitReview === 'n'?false :true">提交审核-->
<!--			</el-button>-->
<!--		</el-tabs>-->

		<!-- 单号显示 -->
		<el-tabs type="border-card" style="height: 150px;margin-top: 15px;">

			<el-form :inline="true" :model="procurementStorage" class="demo-form-inline"
					 style="margin: 35px 0px 0px 30px;">
				<el-form-item label="单据号">
					<el-input v-model="procurementStorage.purchaseId" placeholder="单据id显示" :disabled="true">
						{{this.$route.params.purchaseId}}
					</el-input>
				</el-form-item>
				<el-form-item label="供应商名称" prop="providerId" style="margin-left: 50px;">
					<!-- 这里需要用到字典解析 -->
					<el-select v-model="procurementStorage.providerId" placeholder="请输入供应商名称" clearable
							   style="margin: 0;width: 260px;">
						<el-option v-for="item in providerIdDictionariesData" :key="item.providerId"
								   :label="item.providerName" :value="item.providerId">
						</el-option>
					</el-select>


				</el-form-item>

				<el-form-item label="总批发额" style="margin-left: 20px;">
					<!-- :disabled="true" -->
					<el-input v-model="procurementStorage.purchaseTradeTotalAmount" placeholder="0" :disabled="true">
					</el-input>
				</el-form-item>

				<!-- 			<el-button type="primary" icon="el-icon-s-order" style="margin-left: 30px;" @click="assignmentID">
					生成订单号
				</el-button> -->
			</el-form>
		</el-tabs>

		<!-- 卡片主表格 -->
		<el-tabs type="border-card" style="margin-top: 15px;">
			<!-- 主表格 -->
			<el-table :data="purchaseTable" border height="500px" style="padding-right: 10px"
					  @selection-change="purchaseTableDataChange">
				<el-table-column type="selection" width="55" align="center">
				</el-table-column>
				<!-- 后续这里要显示真实的详情数据 -->
				<!-- purchase_id 			制单号ID -->
				<el-table-column prop="medicinesId" label="药品ID" align="center" show-overflow-tooltip>

				</el-table-column>
				<!-- -->
				<el-table-column prop="medicinesName" label="药品名称" align="center">
				</el-table-column>
				<!-- 					 -->
				<el-table-column prop="conversion" label="规则" align="center">
					<template slot-scope="scope">
						<span>
							{{scope.row.conversion}}{{scope.row.unit}}
						</span>
					</template>
				</el-table-column>
				<!--  -->
				<el-table-column prop="producterId" label="生产厂家" align="center">
				</el-table-column>
				<!-- 数量  卡片  -->
				<el-table-column label="数量" align="center" prop="purchaseNumber" width="180px">
					<template slot-scope="scope">
						<!--  step 每次增加的步长 -->
						<el-input-number v-model="scope.row.purchaseNumber" :min="0" :step="1" size="small"
										 :precision="0" />
					</template>
				</el-table-column>

				<el-table-column prop="unit" label="单位" align="center">
				</el-table-column>

				<!-- 批发价  卡片  -->

				<el-table-column label="批发价" align="center" width="160" prop="tradePrice">
					<template slot-scope="scope">
						<!-- precision 尺寸精度 -->
						<el-input-number v-model="scope.row.tradePrice" :min="0.00" :step="0.1" :precision="2"
										 size="small" />
					</template>
				</el-table-column>
				<!-- 		 -->
				<el-table-column prop="tradeTotalAmount" :min="0.00" label="批发额" align="center">
					<template slot-scope="scope">
						<span>{{scope.row.tradeTotalAmount|rounding}}</span>
					</template>
				</el-table-column>

				<!-- 批发价  input  -->
				<el-table-column prop="batchNumber" label="批次号" align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.batchNumber" size="small" />
					</template>
				</el-table-column>
				<el-table-column label="备注" align="center" prop="remark">
					<template slot-scope="scope">
						<el-input v-model="scope.row.remark" size="small" />
					</template>
				</el-table-column>

				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row)">删除
						</el-button>
						<!--   :disabled="isSubmit"  @click="handleDelete(scope.$index,scope.row)" -->
					</template>
				</el-table-column>
			</el-table>

<!--			&lt;!&ndash; 分页组件 &ndash;&gt;-->
<!--			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"-->
<!--						   :current-page="paging.current" :page-sizes="[7, 10, 15, 20]" :page-size="paging.size"-->
<!--						   layout="total, sizes, prev, pager, next, jumper" :total="paging.total" align="center">-->
<!--			</el-pagination>-->

		</el-tabs>



		<!-- form  表单   也是  药品信息的一个表 -->
		<el-dialog title="提示" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">


			<el-form class="demo-form-inline">

				<!-- 模糊查询组件 -->
				<el-form :inline="true" v-model="medicinal" class="demo-form-inline">

					<el-form-item label="关键字" style="margin-left: 50px;">
						<el-input v-model="medicinal.keywords" placeholder="请输入关键字" style="margin: 0;" clearable>
						</el-input>
					</el-form-item>
					<el-form-item label="药品类型" style="margin-left: 20px;">
						<!-- 这里需要用到字典解析 -->
						<el-select v-model="medicinal.medicinesType" placeholder="药品类型" style="margin: 0;" clearable>
							<el-option v-for="item in medicinestypes" :key="item.dictValue" :label="item.dictLabel"
									   :value="item.dictValue">
							</el-option>
						</el-select>
					</el-form-item>


					<el-form-item label="处方类型" style="margin-left: 20px;">
						<!-- 这里需要用到字典解析 -->
						<el-select v-model="medicinal.prescriptionType" placeholder="处方类型" style="margin: 0;" clearable>
							<el-option v-for="item in PrescriptionTypes" :key="item.dictValue" :label="item.dictLabel"
									   :value="item.dictValue">
							</el-option>
						</el-select>
					</el-form-item>


					<el-form-item style="margin-left: 20px;">
						<el-button icon="el-icon-search" circle @click="SearchForm"></el-button>
						<el-button icon="el-icon-refresh" circle @click="ResetForm"></el-button>
					</el-form-item>
				</el-form>


				<!-- from  主表格 -->
				<!--  ref="MedicinestableDataref"  @selection-change="MedicinestableChange" -->
				<el-table ref="NewPurchaseFromRef" :data="NewPurchaseFromTableData" border style="padding-right: 10px"
						  @selection-change="NewPurchaseFromChange">
					<el-table-column type="selection" width="55" align="center" />

					<!-- 后续这里要显示真实的详情数据 -->
					<el-table-column prop="medicinesId" label="药品ID" align="center">
					</el-table-column>
					<el-table-column prop="medicinesName" label="药品名称" align="center">
					</el-table-column>
					<el-table-column prop="medicinesNumber" label="药品编号" align="center">
					</el-table-column>
					<!-- 需要解析 -->
					<!-- producter_id 生产厂家ID 要解析成为 生产厂家名 -->
					<el-table-column prop="producterId" label="生产厂家" align="center"
									 :formatter="AnalysisProducerDictionaries">
					</el-table-column>
					<!-- 需要解析   :formatter="medicinesAnalysis"-->
					<!-- -->
					<el-table-column prop="medicinesType" label="药品类型" align="center"
									 :formatter="statusformat">
					</el-table-column>
					<!-- 需要解析 -->
					<el-table-column prop="prescriptionType" label="处方类型" align="center"
									 :formatter="statusformat1">
					</el-table-column>

					<el-table-column prop="prescriptionPrice" label="处方价格" align="center">
					</el-table-column>
					<!-- 需要解析 -->
					<el-table-column prop="keywords" label="关键字" align="center">
					</el-table-column>

				</el-table>


				from  分页组件
				<el-pagination @size-change="handleSizeChangeFrom" @current-change="handleCurrentChangeFrom"
							   :current-page="pagingFrom.current" :page-sizes="[5, 10, 15, 20]" :page-size="pagingFrom.size"
							   layout="total, sizes, prev, pager, next, jumper" :total="pagingFrom.total" align="center">
				</el-pagination>


			</el-form>


			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>

		<!--  批量设置 -->
		<el-dialog title="批量设置" :visible.sync="BatchSettingVisible" center width="500px" append-to-body>

			<el-form ref="form" :model="BatchSettingForm" label-width="100px">
				<el-form-item label="数量">
					<el-input-number v-model="BatchSettingForm.quantity" placeholder="请输入数量" size="small">
					</el-input-number>
				</el-form-item>
				<el-form-item label="批发价格">
					<el-input-number v-model="BatchSettingForm.wholesaleprice" :precision="2" placeholder="请输入数量"
									 size="small"></el-input-number>
				</el-form-item>

				<el-form-item label="批次号">
					<el-input size="small" v-model="BatchSettingForm.batchNumber" style="width: 250px;" />
				</el-form-item>

				<el-form-item label="备注">
					<el-input size="small" v-model="BatchSettingForm.remark" style="width: 250px;" />
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="BatchSettingVisible = false">取 消</el-button>
				<el-button type="primary" @click="filtrationConfirm">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {

		// 过滤器
		filters: {
			// 过滤数字只显示后两位
			rounding(value) {
				return value.toFixed(2)
			}
		},
		data() {

			return {
				BatchSettingForm: {},
				BatchSettingVisible: false,
				timer: null,
				SubmitReview: "y",
				//  添加药品  药品指定类型的解析库
				medicinestypes: [],
				// 添加药品 处方类型 的解析库
				PrescriptionTypes: [],
				// 添加药品 搜索数据 存放对象
				medicinal: {},
				// 主表格 存放数据
				purchaseTable: [],
				// 单据号  供应商   总批发额
				procurementStorage: {
					purchaseId: undefined,
					providerId: undefined,
					purchaseTradeTotalAmount: undefined
				},
				//解析 供应商名称  数据 存放
				providerIdDictionariesData: [],
				// from 表单显示
				dialogVisible: false,
				// from  表单  主表格显示
				NewPurchaseFromTableData: [],
				/* form 分页 */
				pagingFrom: {
					current: 1,
					size: 7,
					total: 10
				},
				// 厂家字典
				ProducerDictionariesData: [],
				// 药品类型 字典  数据存放
				TolaodDictDataTypeData: {},
				// 处方类型 字典  数据存放
				TolaodMedicinesDictDataTypeData: [],
				//存放点击事件  数据存放    数组
				NewPurchaseFromRef: [

				],
				// 主表格 分页
				paging: {
					current: 1,
					size: 7,
					total: 10
				},


			}
		},
		//系统加载后运行
		created() {
			//处方字典
			this.initStatus1()
			//1药品字典
			this.initStatus();
			// 供应商字典
			this.providerIdDictionaries(),
			// 生产 厂家 字典
			this.ProducerDictionaries(),
			// 单据号存放
			this.reception(),
			// 赋值id
			this.assignmentID(),
			// 查询 药品 详情
			this.queryStockPurchaseItem()
			/* 				//运行钩子函数
							this.mounted() */
		},
		// 监听数据变化
		watch: {
			// 路由有变化 刷新方法
			// '$route': 'assignmentID',
			// '$route': 'queryStockPurchaseItem',
			purchaseTable: {
				handler: function() {
					this.procurementStorage.purchaseTradeTotalAmount = 0.00
					this.purchaseTable.filter(item => {
						// 单行 批发额
						item.tradeTotalAmount = item.tradePrice * item.purchaseNumber
						// purchaseTradeTotalAmount  更新批发总额
						this.procurementStorage.purchaseTradeTotalAmount += item.tradeTotalAmount
					})
				},

				// 深度监听
				deep: true
			}
		},
		deactivated() {
			//解决vue组件 前进刷新，后退不刷新，
			//$destroy完全销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器。
			this.$destroy();
		},
		methods: {
			/* 主 表格 分页 */
			// handleSizeChange(val) {
			// 	console.log(`每页 ${val} 条`);
			// 	this.paging.size = val;
			// 	this.queryStockPurchaseItem();
			// },
			// handleCurrentChange(val) {
			// 	console.log(`当前页: ${val}`);
			// 	this.paging.current = val;
			// 	this.queryStockPurchaseItem();
			// },
			// 查询 该单  全部药品
			queryStockPurchaseItem() {
				// let newObj = { ...this.procurementStorage};
				// let newObj = {
				// 	...this.paging,
				// 	...this.procurementStorage
				// };
				// "purchaseId":"CG1271356147747651584
				this.$axios.post("/medicine/Inventory/getAll4/"+this.procurementStorage.purchaseId).then(res => {
					console.log(12346)
					console.log(res.data.t.t)
					this.purchaseTable = res.data.t.t

				})
			},
			//赋值  id
			assignmentID() {
				this.procurementStorage.purchaseId = this.$route.query.purchaseId
			},
			//index 索引 下标   row 行数
			handleDelete(index, row) {
				this.purchaseTable.splice(index, 1)
			},
			//批量设置  过滤  主表格数据
			filtrationConfirm() {
				//quantity
				// 数量
				let purchaseNumber = this.BatchSettingForm.quantity;
				// 批发价
				let tradePrice = this.BatchSettingForm.wholesaleprice
				// 批次号
				let batchNumber = this.BatchSettingForm.batchNumber
				// 备注
				let remark = this.BatchSettingForm.remark
				//  主表格数据
				// let  temporary = this.purchaseTable
				this.purchaseTable.filter(item => {
					//无法渲染
					this.$set(item, 'purchaseNumber', item.purchaseNumber ? item.purchaseNumber : purchaseNumber)
					this.$set(item, 'tradePrice', item.tradePrice ? item.tradePrice : tradePrice)
					this.$set(item, 'batchNumber', item.batchNumber ? item.batchNumber : batchNumber)
					this.$set(item, 'remark', item.remark ? item.remark : remark)
				})

				this.BatchSettingVisible = false;
			},
			purchaseTableDataChange(row) {
				console.log(row)
			},

			/* 			// 钩子函数
						mounted(){
							// 开启定时
							this.timer = setInterval(()=>{
								this.reception()
							},2000)
						},
						// 清楚 定时器
						beforeDestroy(){
							this.$once('hook:beforeDestroy',()=>{
								clearInterval(this.timer)
							})
						}, */

			// 接收 reception跳转过来携带的id
			reception() {
				this.procurementStorage.purchaseId = this.$route.params.encryptionPurchaseId
				//开启强制刷新
				// this.$forceUpdate()

			},

			// 批量设置
			batchSet() {
				this.BatchSettingForm = {}
				this.BatchSettingVisible = true;
			},
			//存放数据
			Hold() {
				const purcheseObj = {
					'Purchase': this.procurementStorage,
					'PurchaseItem': this.purchaseTable
				}

				console.log(purcheseObj)

				// 添加 请求
				this.$axios.post("/medicine/EditPurchase/getAll", purcheseObj).then(
						res => {})
				//清空卡片主表格
				this.purchaseTable = []
				// 清空 卡片 选择框
				this.procurementStorage = {}
				this.$router.push("/stock/purchase")
			},

			// form 主表格 触发事件
			NewPurchaseFromChange(row) {
				// this.NewPurchaseFromRef = row
				// 卡片 主表格
				// this.purchaseTable = row
				let temporaryA = row;
				let temporaryB = this.purchaseTable;
				let flag = false;
				//、 主表格

				temporaryA.filter(itemA => {
					temporaryB.filter(itemB => {
						// 判断是否相同
						if (itemA.medicinesId === itemB.medicinesId) {
							flag = true;
						}
					})
					// 不相同 就添加
					if (!flag) {
						this.purchaseTable.push(JSON.parse(JSON.stringify(itemA)))
					}
				})


				this.purchaseTable.filter(m => {
					this.$set(m, 'purchaseNumber', m.purchaseNumber ? m.purchaseNumber : 1)
					this.$set(m, 'tradePrice', m.tradePrice ? m.tradePrice : 0.00)
					this.$set(m, 'tradeTotalAmount', m.tradeTotalAmount ? m.tradeTotalAmount : 0.00)
				})

				//判断 按钮是否开启
				if (this.purchaseTable.length >= 1) {
					this.SubmitReview = "y"
				} {
					this.SubmitReview = "n"
				}

			},
//药品类型字典解析
			statusformat(row){
				let val=row.medicinesType ;
				return this.formatDict(this.medicinestypes,val)
			},
			//药品类型
			initStatus(){
				this.$axios.get("system/api/dict/data/findByType/his_medicines_type").then(r=>{
					this.medicinestypes = r.data.t;
				})
			},
			//处方类型字典解析
			statusformat1(row){
				let val=row.prescriptionType ;
				return this.formatDict(this.PrescriptionTypes,val)
			},
			//处方类型
			initStatus1(){
				this.$axios.get("system/api/dict/data/findByType/his_prescription_type").then(r=>{
					this.PrescriptionTypes = r.data.t;
				})
			},
			// 解析 厂家 字典
			AnalysisProducerDictionaries(row) {
				for (let i = 0; i < this.ProducerDictionariesData.length; i++) {
					if (this.ProducerDictionariesData[i].producerId == row.producterId) {
						return this.ProducerDictionariesData[i].producerName;
					}
				}

				return "";

			},
			// 生产 厂家 字典  stock_producer
			ProducerDictionaries() {
				// get  自己 家口  openfeign 调用自己家接口
				this.$axios.get("/medicine/producer/getAll1").then(res => {
					this.ProducerDictionariesData = res.data.t
				})
			},
			// 重置
			ResetForm() {
				this.medicinal = {}
				this.NewPurchaseFromTable();
			},
			// 搜索 按钮
			SearchForm() {
				this.NewPurchaseFromTable();
			},
			/* 分页 */
			handleSizeChangeFrom(val) {
				console.log(`每页 ${val} 条`);
				this.pagingFrom.size = val;
				this.medicinal = {};
				this.NewPurchaseFromTable();
			},
			handleCurrentChangeFrom(val) {
				console.log(`当前页: ${val}`);
				this.pagingFrom.current = val;
				this.medicinal = {};
				this.NewPurchaseFromTable();
			},
			// 查询住 form 表单  主表格 显示
			NewPurchaseFromTable() {
				// 需要改成自己的 openfingn
				const newObj = Object.assign(this.medicinal, this.pagingFrom)
				this.$axios.post("medicine/Medicines/getAll3", {params:newObj}).then(res => {
					this.NewPurchaseFromTableData = res.data.t.records;
					this.pagingFrom.total = res.data.t.total
				})
			},


			//重置请求
			medicinalReset() {
				this.medicinal = {};
			},
			// 点击添加药品弹出form 表单
			AddMedicine() {
				this.dialogVisible = true;
				this.NewPurchaseFromTable()


			},
			handleClose(done) {
				this.$confirm('确认关闭？')
						.then(_ => {
							done();
						})
						.catch(_ => {});
			},
			//供应商 字典
			providerIdDictionaries() {

				this.$axios.get("medicine/provider/getAll1").then(res => {
					this.providerIdDictionariesData = res.data.t
				})
			},
		}

	}
</script>

<style>
</style>
